<template>
	<view class="wrapper index">
		<u-loading-page :loading="loading"></u-loading-page>
		<navbar title="首页" leftIcon=""></navbar>
		<swiper :autoplay="true" :interval="3000" :duration="1000" class="mb30">
			<swiper-item>
				<view class="swiper-item"><image src="@/static/fuyan2.png" mode="aspectFill"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"><image src="@/static/fuyan2.png" mode="aspectFill"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"><image src="@/static/fuyan2.png" mode="aspectFill"></image></view>
			</swiper-item>
		</swiper>
		<div class="main">
			<div class=" mb30">
				<div class="middle-box bfff ">
					<div class="f28 fbold mb10">公告通知</div>
					<div class="f24 nowrap">【公告通知】智慧管理系统因中秋国庆放假</div>
					<div class="f24 nowrap">【公告通知】智慧管理系统因中秋国庆放假</div>
					<div class="f24 nowrap">【公告通知】智慧管理系统因中秋国庆放假</div>
				</div>
			</div>
			<div class="bfff mb30 ">
				<div class="f36 fbold c000 flex-start mb35">
					<view class="mini-box "></view>
					<div class="ml15">智慧停车</div>
				</div>
				<div class="space-around fWrap  ">
					<div class="tCenter box-1" @click="open('../my/daiban')">
						<image src="../../static/index5.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">停车缴费</div>
					</div>
					
					<div class="tCenter box-1" @click="open('../my/daiban')">
						<image src="../../static/index7.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">月租续费</div>
					</div>
				</div>
			</div>
			<div class="bfff mb30 ">
				<div class="f36 fbold c000 flex-start mb35">
					<view class="mini-box "></view>
					<div class="ml15">访客门禁</div>
				</div>
				<div class="space-around fWrap  ">
					<div class="tCenter box-1" @click="open('../door/door')">
						<image src="../../static/index11.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">人脸开锁</div>
					</div>
					
					<div class="tCenter box-1" @click="open('../door/duijiang')">
						<image src="../../static/index9.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">可视对讲</div>
					</div>
				</div>
			</div>
			<div class="bfff mb30 ">
				<div class="f36 fbold c000 flex-start mb35">
					<view class="mini-box "></view>
					<div class="ml15">会议系统</div>
				</div>
				<div class="space-around fWrap  ">
					<div class="tCenter box-1" @click="open('../huiyi/huiyi')">
						<image src="../../static/index12.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">会议音频</div>
					</div>
					
					<div class="tCenter box-1" @click="open('../door/duijiang')">
						<image src="../../static/index9.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">可视远程</div>
					</div>
					<div class="tCenter box-1" @click="open('../door/duijiang')">
						<image src="../../static/index8.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">智能会议</div>
					</div>
					
					<div class="tCenter box-1" @click="open('../huiyi/yuyue')">
						<image src="../../static/index10.png" mode="widthFix" class="nav-icon-2"></image>
						<div class="f24 c333">预约会议</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	
</script>

<style lang="scss">
	swiper image{
		height: 270rpx;
		overflow: hidden;
		width: 100%;
		border-radius: 30rpx;
	}
	swiper{
		border-radius: 30rpx;
	}
	.box-1 {
		width: 50%;
		height: 120rpx;
		margin-bottom: 30rpx;
	}

	.nav-icon-2 {
		width: 56rpx;
		height: 56rpx;
	}
	.mini-box {
		width: 8rpx;
		height: 32rpx;
		background: #408CFF;
		border-radius: 4rpx;
	}

	.middle-box {
		padding: 44rpx 28rpx;
		line-height: 1.8;
	}

	#charts {
		height: 480rpx;
	}

	.bfff {
		padding: 28rpx;
		border-radius: 24rpx;
	}

	page {
		background: url(/static/bcak1.png) no-repeat #FAFAFA;
		background-size: 100% auto;
		padding: 30rpx;
	}
</style>